<template>
  <div class="modal" id="switch-dept-win">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
          <h4 class="modal-title">切换组织</h4>
        </div>
        <div class="modal-body">
          <div class="query-box">
            <input id="dept-search-input" v-model="val" @input="viewDeptPage" @propertychange="viewDeptPage" class="form-control" placeholder="搜索部门"/>
            <a class="query-btn" role="button"><i class="fa fa-search"></i></a>
          </div>
          <div id="deptLoading" class="uapLoading">
            <img src="/static/resources/img/admin_index_loader.gif">
          </div>
          <table id="dept_table" class="table table-bordered table-hover">
            <tbody id="userDept">
            <tr v-if="currentDeptInfo !== ''" v-for="(item,k) in currentDeptInfo" :key="k">
              <td><a :href="url+'deptCode='+item.deptCode+'&deptName='+item.deptName">{{item.deptName}}</a></td>
            </tr>
            </tbody>
          </table>
          <ul class="pagination">
            <li class="paginate_button " id="dept_table_frist">
              <a href="javascript:void(0)" aria-controls="dept_table" data-dt-idx="0" tabindex="0"
                 @click="!userInfo.deptPage.isFirst && GET_currentDeptInfo(1)">首页</a>
            </li>
            <li class="paginate_button previous" id="dept_table_previous">
              <a href="javascript:void(0)" aria-controls="dept_table" data-dt-idx="0" tabindex="0"
                 @click="GET_currentDeptInfo(userInfo.deptPage.prePage)">上一页</a>
            </li>
            <li class="paginate_button next" id="dept_table_next">
              <a href="javascript:void(0)" aria-controls="dept_table" data-dt-idx="" tabindex="0"
                 @click="GET_currentDeptInfo(userInfo.deptPage.nextPage)">下一页</a>
            </li>
            <li class="paginate_button " id="dept_table_last">
              <a href="javascript:void(0)" aria-controls="dept_table" data-dt-idx="" tabindex="0"
                 @click="!userInfo.deptPage.isLast && GET_currentDeptInfo(userInfo.deptPage.totalPage)">尾页</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import store from '../../store/store';
  import {mapActions,mapState} from 'vuex';
    export default {
        name: "switch-dept-win-com",
        data(){
          return {
            val:'',
            url:MENUCORE_SERVICE_URL+'indexUser/switchDept?',
            userInfo:userInfo
          }
        },
        store,
        methods:{
          ...mapActions('departmentStore',['GET_currentDeptInfo']),
          viewDeptPage(){
            if (this.val.length < 2) {
              return;
            }
            this.GET_currentDeptInfo();
          }
        },
        computed:{
          ...mapState('departmentStore',['currentDeptInfo'])
        },

    }
</script>

<style scoped>

</style>
